<template>
  <el-dialog title="绑定电站" v-model="openBind" width="1000px" append-to-body :close-on-click-modal="false" @close="cancel">
    <el-form ref="formBindRef" :model="formBind" :rules="rulesBind" label-width="120px">
      <el-form-item label="电站名称">
        <span v-if="station_name">{{ station_name }}</span>
        <span v-else>未绑定</span>
      </el-form-item>
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="电站名称" prop="stationName">
          <el-input v-model="queryParams.stationName" placeholder="请输入电站名称" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="station_list">
        <el-table-column label="电站名称" align="center" prop="stationName" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button :type="scope.row.checked == true ? 'danger' : 'primary'" @click="handleCheck(scope.row)">
              <span>
                {{ scope.row.checked ? "取消选择" : "选择" }}
              </span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getStation" />
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getDev, updateDev } from "@/api/equipment/dev";
import { listStation } from "@/api/equipment/station";

const { proxy } = getCurrentInstance();
const ids = ref([])

const loading = ref(false);
const openBind = ref(false);// 对话框显示or隐藏
const formBind = ref({
  stationId: null,
})
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  stationName: null,
})
const total = ref(0)
const rulesBind = ref({
  stationName: [{ required: true, message: "请选择电站", trigger: "blur" }],
})
const station_list = ref([])
const station_name = ref(null)

function open(row) {
  const id = row.devId || ids.value;
  getDev(id).then((response) => {
    formBind.value = response.data;
    openBind.value = true;
  });
  getStation();
}

// 暴露出去
defineExpose({
  open,
})

function cancel() {
  openBind.value = false;
  reset();
}

function reset() {
  formBind.value = {};
  proxy.resetForm("formBindRef");
}

function getStation() {
  // loading.value = true;
  listStation(queryParams.value).then((response) => {
    station_list.value = response.rows;
    total.value = response.total;
    if (station_list.value.length > 0) {
      for (let i = 0; i < station_list.value.length; i++) {
        if (formBind.value.stationId == station_list.value[i].stationId) {
          station_name.value = station_list.value[i].stationName;
          station_list.value[i].checked = true;
        } else {
          station_list.value[i].checked = false;
        }
      }
    }
    loading.value = false;
  });
}

function handleQuery() {
  queryParams.value.pageNum = 1;
  getStation();
}

function resetQuery() {
  proxy.resetForm("formBindRef");
  proxy.resetForm("queryForm");
  handleQuery();
}

function handleCheck(row) {
  if (formBind.value.stationId == row.stationId) {
    station_name.value = null;
    formBind.value.stationId = -1;
    row.checked = false;
  } else {
    station_name.value = row.stationName;
    formBind.value.stationId = row.stationId;
    row.checked = true;
  }
  getStation();
}

function submitForm() {
  proxy.$refs["formBindRef"].validate(valid => {
    if (valid) {
      updateDev(formBind.value).then(response => {
        if (response.code == 0) {
          proxy.$modal.notifySuccess("绑定成功");
          cancel();
          if (reload.value) reload();
        }
      });
    }
  });
}

function reload() {
  type: Function
}
</script>
